<template>
	<view class="avatarBox">
		<view class="avatarBoxFlex" @click="jumpSet()">
			<u-avatar :src="src" size="200" class="avatar"></u-avatar>
			<span style="font-weight: bold;font-size: 40rpx;margin-left: 60rpx;"> 张美丽 </span>
		</view>
		<view class="address">
			<view class="col1">
				家庭住址：北京市东城区兰花社里小区10号楼
			</view>
			<view class="col2">
				电话号码：13812175889
			</view>
		</view>
	</view>
	<view class="box2">
		<view class="title">
			我的家庭
		</view>
		<view class="ava">
			<u-avatar src="https://img1.baidu.com/it/u=912715153,3911278706&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
				size="150" class="avatar"></u-avatar>
			<u-avatar src="https://img0.baidu.com/it/u=2082699403,1778601160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
				size="150" class="avatar"></u-avatar>
			<u-avatar src="https://img1.baidu.com/it/u=1980328927,2157254052&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
				size="150" class="avatar"></u-avatar>
		</view>
	</view>

	<view class="box2">
		<view class="title">
			我的设备
		</view>
		<view class="ava2">
			<view>
				手环2
			</view>
			<view style="margin-top: 20rpx;">
				连接中... <span style="margin-left: 550rpx;">></span>
			</view>
			<view class="add">
				<u-icon name="plus" size='50' color="#74a5fa"></u-icon>
				<span style="color:#74a5fa;font-size: 30rpx;">添加设备</span>
			</view>
		</view>
	</view>

	<view class="box2">
		<view class="title">
			更多操作
		</view>
		<view style="margin-left: 40rpx;margin-top: 40rpx;">
			更多操作
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://s1.ax1x.com/2023/03/21/ppaS4KJ.png',
			}
		},
		methods: {
			jumpSet() {
				uni.navigateTo({
					url: '/pages/tabbar/my/set'
				});
			}
		}
	}
</script>

<style>
	.avatarBox {
		margin-top: 60rpx;
		padding-bottom: 40rpx;
		border-bottom: 0.5pt solid rgba(144, 144, 144, 0.25);
		box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
	}

	.avatarBoxFlex {
		display: flex;
		align-items: center;
	}

	.avatar {

		margin-left: 40rpx;
	}

	.address {
		margin-left: 40rpx;
		margin-top: 20rpx;
	}

	.col2 {
		margin-top: 20rpx;
	}

	.box2 {
		margin-top: 70rpx;
		padding-bottom: 40rpx;
		border-bottom: 0.5pt solid rgba(144, 144, 144, 0.25);
		box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin-left: 40rpx;
		font-weight: bold;
		font-size: 40rpx;
	}

	.ava {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		width: 100%;
	}

	.ava2 {
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;
		margin-top: 40rpx;
	}

	.add {
		margin: auto;
		margin-top: 30rpx;
	}
</style>
